<template>
	<view class="content">
		<view  v-for="itme in showData" :key="itme.id">
			<view class="itme" @click="newsItmeClick(itme)">
			<image class="img" mode="aspectFill" :src="itme.image"></image>
		    <text class='title'>{{itme.title}}</text> 
			<image class="icon" src="@/static/images/Bookmark.png" mode="widthFix"></image>
			</view>
		</view>
		<uni-load-more class='Loading' v-if="isLoading" iconType="circle" status="loading" />
		<uni-load-more v-show="isNoMore" iconType="circle" status="noMore" />
	</view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'//引入mapState
	export default {
		data() {
			/* let Arr = this.$store.state.fifaArr */
			return {
				//总的数据
				fifaXinWenArr:[],
				//每页显示的数据
				showData:[],
				obj:{},
				//显示加载
				isLoading:false,
				//是否没有数据
				isNoMore:false,
				//定时器节流
				timerId:null,
				//第一页标识
				pageIndex:0,
				
			}
		},
		onLoad() {
			/* this.getRemenData() */
			this.fifaXinWenArr = this.$store.state.fifaArr
			console.log(this.fifaXinWenArr,'News-------V');
			//加载时先给showData第一页数据
			this.showData = this.fifaXinWenArr.slice(0,8)
		},
		 onReachBottom() {
			 this.isLoading = true
			/* let timerId = null */
			/* 判断定时器timerId是否存在，如果不等于空说明当前正在由一个定时器任务执行，
				这时再次触底就退出函数，直到定时器等于null时才会继续执行。 
			*/
			 if(this.timerId !== null){
				 return
			 } 
			this.pageIndex += 8
			this.timerId = setTimeout(()=>{
				 this.isLoading = false
				 this.timerId = null
				
				 for(let i = this.pageIndex ; i < this.pageIndex + 8; i++){
					 //如果还有数据就追加
					 if(this.fifaXinWenArr[i]){
						this.showData.push(this.fifaXinWenArr[i])  
					 }else{
						 //否则显示没有更多数据
						this.isNoMore = true
						console.log();
						return
					 }
				 }
				 console.log(this.showData,'onReachBottom---------');
			 },1000)
		 	
		 },
		methods: {
			/* getRemenData(){
				uni.request({
					url: 'https://sports.cctv.com/2019/07/gaiban/cmsdatainterface/page/guoji_shijiebei_1.jsonp?cb=guoji_shijiebei',
					method:'GET',
					// header:{
					// 'Access-Control-Allow-Origin': '*',
					// 'Cookie':'cna=Pcv8G21OfGcCAbSM9+EO7e9K; sca=6c60fbfa; cbsVisitorId=user_9da84ad1cab70b8cc2c703a05ad; country_code=CN; atpsida=b6c7e1c59db5e30135dea26b_1670144422_3',
					// },
					success: (res) => {
						console.log(res.data,'---------');
						let jsonData = res.data
						let obj = jsonData.slice(16,-1)
						let obj2 = JSON.parse(obj)
						console.log(obj2.data.list.length);
						for( let i = 0; i < obj2.data.list.length;i++){
							this.fifaArr.push(obj2.data.list[i])
						}
						this.showData = this.fifaArr.slice(0,8)
					
						console.log(this.showData,'------this.showData-----');
						console.log(this.fifaArr,'------this.fifaArr-----');
						
					}
				})
			
			}, */
			newsItmeClick(itme){
				console.log(itme.id);
				let id = itme.id;
				let image = itme.image
				let image2 = itme.image2
				let image3 = itme.image3
				let brief = itme.brief
				uni.navigateTo({
					url:`/pages/news-details/news-details?image=${image}&image2=${image2}&image3=${image3}&brief=${brief}`,
					
				})
			}
		
		}
	}
</script>

<style lang="scss">
.content{
	
	height: 90px;
	.itme{
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: linear-gradient(90deg, #f1f1f1 90%, #cbcbcb 60%);
		margin: 15px 0;
		border-radius: 16px;
		.img{
			width: 28.15%;
			height: 90px;
			transform: translate(-7%);
			border-radius: 10px 0 0 10px;
		}
		.title{
			color: #0b0b0b;
			width: 55.3%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.icon{
			width: 5.77%;
			height: 20.5%;
		}
	}
	.Loading{
		margin-bottom: 20px;
	}
}
</style>
